﻿<template>
    <div>
        <div class="big_box">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>人员管理</el-breadcrumb-item>
                <el-breadcrumb-item>薪资列表</el-breadcrumb-item>
            </el-breadcrumb>
            <el-divider></el-divider>
            <el-form class="demo-form-inline" label-width="140px">
                <el-row :gutter="5">
                    <el-col :span="3">
                        <el-select v-model="UserId" filterable required placeholder="请选择查询人员">
                            <el-option value="0" label="请选择查询人员">请选择查询人员</el-option>
                            <el-option v-for="(v,k) in AllUsers" :value="v.Id" :data-userid="v.Id" :label="v.UserName" v-text="v.UserName" />
                        </el-select>
                    </el-col>
                    <el-col :span="1">
                        <el-button icon="el-icon-search" style="width:100%"  @click="GettableDB()"></el-button>
                    </el-col>
                    <el-col :span="1">
                        <el-button class="buttongroup"  type="success" icon="el-icon-circle-plus-outline" @click="AddSalaryStructure">添加</el-button>
                    </el-col>
                </el-row>

            </el-form>
        </div>
        <el-row style="padding-top: 10px">
            <el-col>
                <el-table :data="tableData"
                          style="width: 100%"
                          ref="multipleTable"
                          border>
                    <el-table-column header-align="center" type="selection" width="50" align="center"></el-table-column>
                    <el-table-column header-align="center" fixed type="index" label="序号" width="50" align="center" :index="_indexMethod"></el-table-column>
                    <el-table-column header-align="center" prop="UserId" label="姓名" align="center" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            {{GetUserNameById(scope.row.UserId)}}
                        </template>
                    </el-table-column>
                    <el-table-column header-align="center" prop="BaseWage" label="基本工资" align="center" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column header-align="center" prop="SeniorityWage" label="年功工资" align="center"></el-table-column>
                    <el-table-column header-align="center" prop="PositionWage" label="岗位责任工资" align="center" minWidth='110'></el-table-column>
                    <el-table-column header-align="center" prop="PositionSkillWage" label="岗位技能" align="center"></el-table-column>
                    <el-table-column header-align="center" prop="PostLaborConditions" label="劳动条件" align="center" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column header-align="center" prop="PostLaborIntensity" label="劳动强度" align="center" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column header-align="center" prop="PostMentalStrength" label="脑力强度" align="center" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column header-align="center" prop="Education" label="学历" align="center" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column header-align="center" prop="SocialSecuritySubsidy" label="社保补助" align="center" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column header-align="center" prop="WorkOvertimeWage" label="加班" align="center" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column header-align="center" prop="BusinessTravelWage" label="出差" align="center"></el-table-column>
                    <el-table-column header-align="center" prop="BonusWage" label="奖金" align="center"></el-table-column>
                    <el-table-column header-align="center" prop="CertificateWage" label="证书" align="center" minWidth='110' :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column header-align="center" prop="MealTonic" label="餐补" align="center" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column header-align="center" prop="OtherWage" label="其它" align="center" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column header-align="center" prop="PersonalProfile" label="操作" align="center"  minWidth='251' :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <el-button type="primary" class="BtnSize" size="mini" plain @click="order(scope.row)">薪资单</el-button>
                            <el-button type="success" class="BtnSize" size="mini" plain @click="edit(scope.row)">编辑</el-button>
                            <el-button type="warning" class="BtnSize" size="mini" plain @click="deleteFc(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>

                </el-table>
            </el-col>
            <el-col :span="24">
                <div class="block" style="float: right">
                    <el-pagination @size-change="GettableDB"
                                   @current-change="GettableDB"
                                   :current-page.sync="pagination.currentPage"
                                   :page-sizes="pagination.pagesizes"
                                   :page-size.sync="pagination.pagesize"
                                   layout="total, sizes, prev, pager, next, jumper"
                                   :total.sync="pagination.total">
                    </el-pagination>
                </div>
            </el-col>
        </el-row>

        <el-dialog :visible.sync="AddSalaryStructureShow" title="添加薪资信息" width="70%">
            <AddSalaryStructure :AllUsers="AllUsers">

            </AddSalaryStructure>
        </el-dialog>

        <el-dialog :visible.sync="UpSalaryStructureShow" title="修改薪资信息" width="70%">
            <UpSalaryStructure :AllUsers="AllUsers"
                               :UpSalaryStructureDB="UpSalaryStructureDB">
            </UpSalaryStructure>
        </el-dialog>
        <el-dialog :visible.sync="SalaryStructureReportShow" :title="SalaryStructureReportTitle" fullscreen>
            <SalaryStructureReport
                                 :AllUsers="AllUsers"
                                 :datavalue="datavalue"
                                 :AllDepartment="AllDepartment"
                                 :AllPostion="AllPostion"
                                   >
            </SalaryStructureReport>
        </el-dialog>


    </div>
</template>

<script>
    import * as publicjs from "/public/Scriput/Public"
    import AddSalaryStructure from "./AddSalaryStructure";
    import UpSalaryStructure from "./UpSalaryStructure";
    import SalaryStructureReport from "./SalaryStructureReport";


    export default {
        name: "SalaryStructure",
        components: {
            AddSalaryStructure,
            UpSalaryStructure,
            SalaryStructureReport
        },
        data() {
            return {
                AllDepartment: [],
                AllPostion: [],
                //薪资单
                datavalue: {},

                SalaryStructureReportTitle: '',
                AddSalaryStructureShow: false,
                UpSalaryStructureShow: false,
                SalaryStructureReportShow: false,
                UpSalaryStructureDB: {},
                AllUsers: [],
                tableData: [],
                UserId: '0',
                //分页数据绑定
                pagination: {
                    currentPage: 1,
                    pagesizes: [15, 50, 100,],
                    pagesize: 15,
                    total: 0
                },
            }

        },
        created() {
            this.AllUsers = publicjs.GetCompanyAllUsers(this.$http);
            this.AllDepartment = publicjs.GetAllDepartment(this.$http);
            this.AllPostion = publicjs.GetAllDutyMains(this.$http);

            this.GettableDB();
        },
        methods: {
            GettableDB() {
                let loadding = this.openLoading();
                this.$http.post("/UserInfo/GetSalaryStructure", {
                    UserId: this.UserId,
                    offset: this.pagination.currentPage,
                    limit: this.pagination.pagesize
                }).then(res => {
                    loadding.close();
                    this.tableData = res.data.data;
                    this.pagination.total = res.data.count;
                });
            },
            order(obj) {

                console.log(obj);
                this.$http.post("/UserInfo/SalaryStructureReport", {
                    id: obj.UserId,
                }).then(res => {
                    this.SalaryStructureReportTitle = '薪资单---' + this.GetUserNameById(obj.UserId);
                    this.SalaryStructureReportShow = true;
                    this.datavalue = res.data.objDB;

                });

            },
            edit(obj) {
                this.UpSalaryStructureShow = true;
                this.UpSalaryStructureDB = JSON.parse(JSON.stringify(obj));

            },
            deleteFc(obj) {
                console.log(obj);
                this.$confirm('你确定要删除吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'error'
                }).then(() => {
                    let loadding = this.openLoading();
                    this.$http.post("/UserInfo/RemoveSalaryStructure", {
                        id: obj.Id,
                    }).then(res => {
                        loadding.close();
                        if (res.data.mes.IsSuccess) {
                            this.$message.success(res.data.mes.Msg)
                            this.GettableDB();
                        } else {
                            this.$message.error(res.data.mes.Msg)
                        }
                    });
                });


            },
            GetUserNameById(id) {
                var name = "";
                var obj = this.AllUsers.find((x) => x.Id == id);
                if (obj != null && obj != undefined)
                    name = obj.UserName
                return name;
            },
            _indexMethod(index) {
                return ((this.pagination.currentPage - 1) * this.pagination.pagesize) + index + 1
            },
            AddSalaryStructure() {
                this.AddSalaryStructureShow = true;

            },

        }
    }
</script>

<style scoped>
</style>